<template>
  <div class="scroll-wrapper">
    <!-- 文章列表组件 -->
    <!--  {{ Math.random() }} -->
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="已经很深了~"
        @load="onLoad"
      >
        <van-cell
          v-for="(item, idx) in list"
          :key="idx"
          :title="item.title"
          @click="$router.push('/article/' + item.art_id)"
        >
          <div slot="label">
            <!-- 图片区域 -->
            <van-grid
              v-if="item.cover.images"
              :column-num="item.cover.images.length"
            >
              <van-grid-item
                v-for="(value, idx) in item.cover.images"
                :key="idx"
              >
                <van-image lazy-load :src="value" />
              </van-grid-item>
            </van-grid>
            <!-- 文字区域 -->
            <div class="meta">
              <span>{{ item.aut_name }}</span>
              <span>{{ item.comm_count }}评论</span>
              <span>{{ item.pubdate | dateFormate }}</span>
              <span class="close">
                <van-icon
                  name="cross"
                  v-if="$store.state.tokenInfo.token"
                  @click="hActionMore(item.art_id)"
                />
              </span>
            </div>
          </div>
        </van-cell>
      </van-list>
    </van-pull-refresh>
    <van-popup v-model="isShowMoreAction" :style="{ width: '80%' }">
      <MoreAction
        @un-like="hUnlike"
        :articleId="articleId"
        @close-showAction="closeShowAction"
        @report="hReport"
        ref="MoreAction"
      ></MoreAction>
    </van-popup>
  </div>
</template>

<script>
import { unLike, getArticles, report } from '@/api/article.js'
import MoreAction from './moreAction.vue'

export default {
  name: 'ArticleList',
  props: ['channel'],
  components: {
    MoreAction
  },
  data () {
    return {
      list: [], // 保存获取到的列表数据
      loading: false, // 是否正在加载
      refreshing: false, // 是否正在下拉刷新
      finished: false, // 是否全部的数据加载完成了
      timestamp: Date.now(),
      isShowMoreAction: false, // 默认不显示弹出层
      articleId: null // 默认文章id
    }
  },
  methods: {
    async onRefresh () {
      // 时间戳，请求新的推荐数据传当前的时间戳，请求历史推荐传指定的时间戳
      const { data: { data } } = await getArticles(this.channel.id, Date.now())
      const arr = data.results
      // 将每次请求返回的历史时间戳赋值给timestamp
      // this.timestamp = data.pre_timestamp
      // 增加一个延时,方便查看效果
      // setTimeout(() => {
      // 1.// 从头部追加到list
      this.list.unshift(...arr)
      // 2.把loading设置为false
      // 加载状态结束
      this.refreshing = false
      // 3.判断是否所有的数据全部加载完成 若是将finished设置为true
      // if (arr.length === 0 || !data.pre_timestamp) {
      //   // 说明取不到数据了
      //   this.finished = true
      // }
      this.$toast.success('数据已经是最新的了')
      // }, 600)
    },
    async onLoad () {
      // 时间戳，请求新的推荐数据传当前的时间戳，请求历史推荐传指定的时间戳
      const { data: { data } } = await getArticles(this.channel.id, this.timestamp)
      const arr = data.results
      // 将每次请求返回的历史时间戳赋值给timestamp
      this.timestamp = data.pre_timestamp
      // 增加一个延时,方便查看效果
      // setTimeout(() => {
      // 1.追加数据到list
      this.list.push(...arr)
      // 2.把loading设置为false
      // 加载状态结束
      this.loading = false
      // 3.判断是否所有的数据全部加载完成 若是将finished设置为true
      if (arr.length === 0 || !data.pre_timestamp) {
        // 说明取不到数据了
        this.finished = true
      }
      // }, 600)
      // 4.页面中提示用户
      this.$toast.success('成功加载数据')
    },
    hActionMore (id) {
      this.isShowMoreAction = true
      this.articleId = id
      // 在moreAction创建出来之后默认将子组件的isReport设置为false
      if (this.$refs.MoreAction) {
        this.$refs.MoreAction.isReport = false
        this.$refs.MoreAction.show = false
      }
    },
    delArticle (articleId) {
      // 1. 查找(findIndex)：在list中找到 编号=== articleId的那个文章
      //   findIndex，如果有找到，则返回值就是下标；如果找不到返回-1
      const idx = this.list.findIndex(item => {
        if (item.art_id === articleId) {
          return true
        }
      })
      // 如果有找到，则返回值就是下标；如果找不到返回-1
      if (idx !== -1) {
        // 2. 删除(splice)：
        // 数组.splice(下标，要删除的个数)
        this.list.splice(idx, 1)
      }
    },
    async hUnlike () {
      try {
        // 1. 调用接口，传文章编号
        await unLike(this.articleId)
        // 2. 关闭弹出层
        this.isShowMoreAction = false
        // 3. 删除文章
        this.delArticle(this.articleId)
        // 提示
        this.$toast.success('操作成功')
      } catch (err) {
        console.log(err)
        this.$toast.fail('操作失败')
      }
    },
    async hReport (reportTypeId) {
      try {
        // 1. 调用接口，传文章编号
        await report(this.articleId, reportTypeId)
        // 2. 关闭弹出层
        this.isShowMoreAction = false
        // 3. 删除文章
        this.delArticle(this.articleId)
        // 提示
        this.$toast.success('操作成功')
      } catch (err) {
        console.log(err)
        this.$toast.fail('操作失败')
      }
    },
    // 关闭弹出层子组件的回调
    closeShowAction (artId) {
      // 关闭弹出层
      this.isShowMoreAction = false
      // 删除文章
      this.delArticle(artId)
    }
  }
}
</script>
<style scoped lang='less'>
.meta {
  span {
    margin-right: 10px;
  }
  display: flex;
  // 让它在最右边
  .close {
    // 它的父级容器是flex的，给当前元素设置左外边距为auto，会让这个元素在父级容器
    // 的最右边
    margin-left: auto;
  }
}
</style>
